<template>
	<div class="error-list">
		<list-title :data="header"></list-title>
		<list-table :list="errorList" :tableLoading="tableLoading" :footer="true" :pagination="pagination" :batch="batch" @batchChange="batchChange">
			<template v-slot:data>
				<el-table-column prop="e_id" label="编号" width="80px"></el-table-column>
				<el-table-column prop="statusCode" label="错误码" width="80px"></el-table-column>
				<el-table-column prop="objClass" label="错误类"></el-table-column>
				<el-table-column prop="message" label="错误信息"></el-table-column>
				<el-table-column prop="file" label="错误文件"></el-table-column>
				<el-table-column prop="line" label="错误行" width="80px"></el-table-column>
				<el-table-column prop="state" label="错误状态" width="120px">
					<template slot-scope="scope">
						<el-select v-model="scope.row.state" placeholder="请选择" :class="'state' + scope.row.state" @change="stateChange($event, scope.row, scope.$index)" :disabled="stateLock[scope.$index+1]">
							<el-option label="未解决" value="1"></el-option>
							<el-option label="已解决" value="2"></el-option>
							<el-option label="忽略" value="3"></el-option>
							<el-option label="回收站" value="4"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="addTime" label="产生时间" width="150px"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="detail(scope.$index, scope.row)">详情</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {domain} from '@/api';

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '错误日志列表',
				reload: true
			},
			errorList: [
				// {
				// 	e_id: 0,
				// 	statusCode: '',
				// 	objClass: '',
				// 	message: '',
				// 	file: '',
				// 	line: '',
				// 	state: '',
				// 	addTime: '',
				// },
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			delTip: [],//刪除提示
			submitLock: [],
			stateLock: [],
			/*批量操作*/
			batch: [
				{
					id: '5',
					label: '批量删除'
				},
				{
					id: '1',
					label: '批量未解决'
				},
				{
					id: '2',
					label: '批量解决'
				},
				{
					id: '3',
					label: '批量忽略'
				},
				{
					id: '4',
					label: '批量回收'
				}
			],
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
		/*获取错误数据*/
		this.getErrorList()
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getErrorList()
		}
	},
	methods: {
		/*获取错误列表*/
		getErrorList: function(){
			this.$baseURL(domain.ac)
			this.$get(this.$api.errorLogList, this.$route.query).then(res => {
				// console.log(res);
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.errorList = []
						Object.keys(res.data.data.list).forEach((k) => {
							this.errorList.push ({
								e_id: res.data.data.list[k].e_id,
								statusCode: res.data.data.list[k].status_code,
								objClass: res.data.data.list[k].obj_class,
								message: res.data.data.list[k].message,
								file: res.data.data.list[k].file,
								line: res.data.data.list[k].line,
								state: res.data.data.list[k].state,
								addTime: res.data.data.list[k].add_time
							});
						})
						this.pagination = res.data.data.pageInfo
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {
				this.loading = false
			}) 
		},
		/*查看详情*/
		detail: function(index, row){
			console.log(row)
		},
		/*单个删除*/
		handleDelete(index, row) {
			if(!this.submitLock[index+1]){
				this.submitLock[index+1] = true//锁住当前的 删除按钮
				this.delTip.splice(index+1, 1, false)//提示消失
				/*请求后台删除*/
				this.$baseURL(domain.ac)
				this.$post(this.$api.delErrorLog, {
					'id': row.e_id,
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
						this.reload();
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.submitLock = []
					this.submitLock[index+1] = false//释放当前的 删除按钮
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*单个改变状态*/
		stateChange(flag, row, index) {
			// console.log(row.e_id)
			/*请求后台*/
			this.stateLock[index+1] = true//锁住当前的
			this.$baseURL(domain.ac)
			this.$post(this.$api.setErrorState, {
				'flag': flag,
				'id': row.e_id,
			}).then(res => {
				if(res.data.code == 0){
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'success'
					});
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.stateLock = []
				this.stateLock[index+1] = false//释放当前的
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*
		批量操作
		val 操作什么类型，批量删除，还是更改状态....
		data 需要操作的数据
		*/
		batchChange: function(flag, data) {
			// console.log(flag)
			// console.log(data)
			switch(flag) {
				case '5'://批量删除
					var api = this.$api.delErrorLog
					break
				case '1'://批量未解决
					var api = this.$api.setErrorState
					break
				case '2'://批量解决
					var api = this.$api.setErrorState
					break
				case '3'://批量忽略
					var api = this.$api.setErrorState
					break
				case '4'://批量回收
					var api = this.$api.setErrorState
					break
			}
			/*请求后台*/
			this.$baseURL(domain.ac)
			this.$post(api, {
				'flag': flag,
				'id': data,
			}).then(res => {
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code == 0){
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'success'
					});
					this.reload();
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.submitLock[index+1] = false//释放当前的 删除按钮
			})
			.catch(err => {})
			.finally(() => {}) 
		}
	},
};
</script>

<style lang="stylus" scoped>
.error-list
	.state1
		border: 1px solid red
	.state2
		border: 1px solid limegreen
	.state3
		border: 1px solid gray
	.state4
		border: 1px solid gray
</style>